آموزش CSS را از ابتدا با 5 پروژه مادیت کنید [ویدئو]

سرفصل ها و درس ها

مقدمه و شروع Intro & Getting Started

• به دوره خوش آمدید Welcome To the Course

• Materialize چیست و چرا از آن استفاده کنیم؟ What Is Materialize & Why Use It?

• راه اندازی محیط Environment Setup

• مادالیز کردن Sandbox Setup Materialize Sandbox Setup

اجزای CSS - قسمت 1 CSS Components - Part 1

• تایپوگرافی و تراز Typography & Alignment

• رنگ های متن و پس زمینه Text & Background Colors

• دکمه ها و نمادها Buttons & Icons

• دکمه های عمل شناور و ثابت Floating & Fixed Action Buttons

• نوار ناوبری Navbar

• مجموعه ها و نشان ها Collections & Badges

• سیستم شبکه The Grid System

اجزای CSS - قسمت 2 CSS Components - Part 2

• کارت ها Cards

• خرده نان و پاورقی Breadcrumb & Footer

• فرم اصلی و کنترل های ورودی Basic Form & Input Controls

• فرم فانتزی و کنترل های ورودی Fancy Form & Input Controls

• جداول و رسانه Tables & Media

• چیپس و صفحه بندی Chips & Pagination

• Preloaders Preloaders

اجزای تعاملی - قسمت 1 Interactive Components - Part 1

• چرخ فلک Carousel

• تاشو Collapsible

• کشف ویژگی Feature Discovery

• گفتگوها (نان تست و نکات ابزار) Dialogs (Toasts & Tooltips)

• جعبه مواد و لغزنده Material Box & Slider

• مدال ها Modals

اجزای تعاملی - قسمت 2 Interactive Components - Part 2

• اختلاف منظر Parallax

• ناوبری جانبی Side Navigation

• PushPin PushPin

• ScrollSpy Nav Scrolling ScrollSpy Nav Scrolling

• زبانه ها Tabs

پروژه 1 - Travelville Project 1 – Travelville

• معرفی پروژه Project Intro

• نوار ناوبری و Sidenav Navbar & Sidenav

• نوار لغزنده تصویر Image Slider

• جعبه های جستجو و نماد Search & Icon Boxes

• مکان‌ها و گالری محبوب Popular Places & Gallery

• تماس با بخش و ScrollSpy Contact Section & ScrollSpy

پروژه 2 - Quazzu Project 2 – Quazzu

• معرفی پروژه Project Intro

• نوار ناوبری و ویترین Navbar & Showcase

• جعبه ها، درباره و پوشش Boxes, About & Overlay

• بخش پادکست و چرخ فلک توصیفات Podcast Section & Testimonials Carousel

• پاورقی و ورود به سیستم Footer & Login Modal

• صفحه راه حل ها Solutions Page

• صفحه ثبت نام Signup Page

پروژه 3 - Madmin Project 3 – Madmin

• معرفی پروژه Project Intro

• نوار ناوبری و Sidenav Navbar & Sidenav

• شمارنده های آمار و پیش بارگزار Stat Counters & Preloader

• نمایش نمودار و نظرات اخیر Display Chart & Recent Comments

• پست های اخیر و لیست کارها Recent Posts & Todo List

• دکمه شناور و مدال Floating Button & Modals

• صفحات پست ها و دسته ها Posts & Categories Pages

• نظرات و صفحات کاربران Comments & Users Pages

• صفحات ورود و جزئیات Login & Details Pages

پروژه 4 - BizLand Project 4 – BizLand

• معرفی پروژه Project Intro

• هدر تمام صفحه Full Screen Header

• ScrollFire & Boxes ScrollFire & Boxes

• درباره، توصیفات و ScrollSpy About, Testimonials & ScrollSpy

• تماس و نقشه گوگل Contact & Google Map

پروژه 5 - Galappear (با Sass) Project 5 - Galappear (With Sass)

• معرفی پروژه Project Intro

• راه اندازی و ساس کوالا Koala Setup & Sass

• هدر و نوار نوار Header & Navbar

• تغییر و استفاده از متغیرها Changing & Using Variables

• چیدمان گالری Gallery Layout

• Modals & ScrollFire Modals & ScrollFire

• صفحات داخلی Inner Pages